#osc-launcher {

    osc-panel-header {
        background-color:  var(--color-ui-foreground);
        --alpha-fill: .75;
        text-align: left;
        justify-content: center;
        .spacer {
            flex: 1;
        }
        span {
            opacity: 0.5;
            position: absolute;
            right: 12rem;
        }
        flex-shrink: 0;
    }

    flex-direction: column;

    osc-panel-container.main {
        background-color:  var(--color-ui-foreground);
        min-height: 0;
        min-height: 40rem;
        osc-panel-content {
            padding: 8rem;
            background-color:  var(--color-ui-foreground);
        }
    }
    osc-panel-content {
        overflow-y: auto;
        flex: 1;
    }

    osc-panel-container.bottom {
        flex: 1;
        padding: 12rem 8rem;
        min-height: 100rem;

        &.minimized {
            padding: 0;
        }

        border-top: 2rem solid var(--color-ui-foreground);
        max-height: calc(100% - var(--nav-height));
        background-color:  var(--color-background);
        osc-panel-inner {
            background-color:  var(--color-background);
        }

        // --color-background: --color-ui-foreground; // scrollbar
    }

    osc-panel-inner {
        contain: layout style;
    }

}

osc-settings {

    display: grid;
    grid-template-columns: repeat(2, 1fr);

}
osc-settings-field {
    display: flex;
    flex-direction: row;
    // margin: 1rem;
    margin-top:-1rem;
    line-height: 22rem;
    position: relative;
    &:after {
        content:"";
        position: absolute;
        left:100rem;
        top:0;
        right: 0;
        border-top:1rem solid var(--color-ui-foreground);
        z-index: 11;
    }
    &:nth-child(2n) {
        margin-left: 8rem;
    }
    &:nth-child(2), &:nth-child(1) {
        margin-top:0;
        osc-settings-checkbox, osc-settings-reset, osc-settings-file {
            border-top: 0;
        }
        &:after {
            content: none;
        }
    }
    &:nth-last-child(2), &:nth-last-child(1) {
        osc-settings-checkbox, osc-settings-reset, osc-settings-file {
            border-bottom: 0;
        }
    }
    label {
        width: 100rem;
        // text-align: right;
        background: var(--color-ui-background);
        border:1rem solid var(--color-background);
        border-right: none;
        // margin-right: 8rem;
        padding: 0 4rem;
        position: relative;
        line-height: 22rem;
        height: 24rem;
        cursor: help;
        span {
            opacity: 0.5;
        }
    }
    input {
        appearance: none;
        background: var(--color-background);
        flex: 1;
        padding: 0 4rem;
        width: 100rem;
    }
    [disabled], [disabled] ~ * {
        pointer-events: none;
        opacity: 0.75!important;

    }

    &.error label {
        color: var(--color-error);
    }
    &.restart label:after {
        content: "";
        position: absolute;
        top:1rem;
        left:4rem;
        right:-4rem;
        bottom:0;
        background: var(--color-warning);
        opacity: 0.25;
        border-radius: 4rem;
    }
}

osc-settings-checkbox, osc-settings-reset, osc-settings-file {
    @extend osc-inspector-checkbox;

    i {
        color: var(--color-text);
        opacity: 0.75;
    }
    &:hover i {
        opacity: 1;
    }
    &.on {
        --alpha-fill: 0.5;
        i {
            color: var(--color-text-solid);
            opacity: 1;
        }
    }
    &:last-child {
        margin-left: -1rem;
        border-left: 0;
    }
}

#osc-terminal {
    flex: 1;
    line-height: 18rem;
    user-select:text;
    cursor: auto;

    > div {
        margin: 0 12rem;
    }


    * {
        user-select:text;
        cursor: auto;
        white-space: pre-wrap;
    }
    .log span {
        background: transparent!important
    }
    .help {
        font-style: italic;
        color: var(--color-accent);
    }

    .warning {
        color: var(--color-warning);
    }

    .error {
        color: var(--color-error);
    }

    .trace {
        position: relative;
        height: 18rem;
        overflow: hidden;
        &.show {
            height: auto;
            .trace-button:before {
                content: "\f078";
            }
        }
    }
    .trace-button {
        &:before {
            content: "\f054";
            font-size: 10rem;
            font-family: FontAwesome;
        }
        position: absolute;
        left: 0;
        margin-top: -1rem;
        cursor: pointer;
        user-select: none;
    }

    .qrcode svg {
        width: 120rem;
        margin-top: 5rem;
        margin-left: 15rem;
        path[fill="#ffffff"] {
            fill: var(--color-text)!important;
        }
        path[stroke="#000000"] {
            stroke: var(--color-background)!important;
        }
    }

    a {
        text-decoration: underline;
        cursor: pointer;
    }
}
